<template>
  <footer class="footer">
    <div class="footer-container">
      <!-- 左侧联系信息 -->
      <div class="footer-contact">
        <p class="contact-title">联系我们</p>
        <p class="contact-phone">181-4852-2763</p>
        <p class="contact-email">合作邮箱：yftxtx@uftx2023.com</p>
      </div>

      <!-- 右侧二维码 -->
      <div class="footer-qr">
        <div v-for="(item, index) in qrItems" :key="index" class="qr-item">
          <div class="qr-container">
            <img :src="item.src" :alt="item.alt" class="qr-image" />
          </div>
          <p class="qr-title">{{ item.title }}</p>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer-bottom">
      <p @click="gotoMapFn(branchData.coord[1], branchData.coord[0], branchData.fullName)">
        公司地址：{{ branchData.address }}
      </p>
      <p>
        版权所有
        <span @click="gotoMapFn(branchData.coord[1], branchData.coord[0], branchData.fullName)"
          >©友福同享(深圳)智能科技有限公司</span
        >
        <span @click="openReport('https://beian.miit.gov.cn/')"> 粤ICP备12008876号</span>
      </p>
    </div>
  </footer>
</template>

<script setup lang="ts">
// 二维码数据
import { openExternalLink } from '@/utils/navigation.ts'
import { gotoMapFn } from '@/utils/tools.ts'
const branchData = ref({
  name: '深圳（总部）',
  title: '深圳',
  fullName: '友福同享（深圳）智能科技有限公司',
  address: '深圳市南山区南山街道南山社区南新路阳光科创中心一期A座3301A',
  phone: '0755-86701981',
  mission: '集团总部，统筹全国健康服务战略',
  coord: [113.91535, 22.51409], // 修正后
  isHeadquarters: true,
  labelPosition: 'bottom'
})
const qrItems = [
  {
    src: 'https://image.fulllinkai.com/202406/28/eb66da5936cf4dc21765f0d6672b88db.png',
    alt: '友福同享二维码',
    title: '友福同享'
  },
  {
    src: 'https://images.health.ufutx.com/202507/02/394fd3572a92341b538351db421444da.png', // 示例地址，需替换为实际二维码
    alt: '福恋二维码',
    title: '福恋'
  },
  {
    src: 'https://image.fulllinkai.com/202406/28/8b042a92a2226ee618282e5a04e140ef.jpeg', // 示例地址，需替换为实际二维码
    alt: '友福公众号二维码',
    title: '友福公众号'
  }
]

// 外部链接跳转（新标签）
const openReport = (URL: string) => {
  openExternalLink(URL, '_blank')
}
</script>

<style scoped lang="less">
.footer {
  width: 100%;
  background-color: #0b101b;
  color: #fff;
  //padding: @space-xl @container-padding;
}

.footer-container {
  //width: @container-width;
  margin: 0 auto;
  display: flex;
  .mx(192px);
  .py(50px);
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  //padding-bottom: @space-lg;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact {
  text-align: left;
  .contact-title {
    font-size: @font-size-lg;
    font-weight: 500;
    margin-bottom: @space-sm;
    color: @text-color-light;
  }
  .contact-phone {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }
  .contact-email {
    font-size: @font-size-lg;
    color: @text-color-light;
  }
}

.footer-qr {
  display: flex;
  gap: @space-lg;
}

.qr-item {
  text-align: center;
  position: relative;
  cursor: pointer;
  // 给父元素也加上过渡，让整体变化更连贯，避免子元素和父元素过渡不同步
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  .qr-container {
    display: inline-block;
    width: 108px;
    height: 108px;
    overflow: hidden;
    background: #ffffff;
    padding: 4px;
    border-radius: 10px;
    // 更换更丝滑的曲线，cubic-bezier(0.4, 0, 0.2, 1) 是 Material Design 推荐的曲线，过渡更自然
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom; // 底部固定

    &:hover {
      padding: 14px;
      transform: scale(1.3);
      .qr-image {
        transform: scale(1.3);
      }
    }

    .qr-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      // 同样更换更适配的过渡曲线，让图片缩放和容器变化节奏一致
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      //&:hover {
      //transform: scale(1.3);
      //}
    }
  }

  .qr-title {
    margin-top: @space-sm;
    font-size: 14px;
    color: @text-color-light;
    // 给标题也加上淡入淡出的透明度过渡，让整体交互更统一（可选，看需求）
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    &:hover {
      // hover 时稍微提升标题透明度，突出交互反馈（可选）
      opacity: 1;
    }
  }
}

.footer-bottom {
  width: @container-width;
  margin: auto;
  text-align: center;
  color: @primary-light;
  .px(192px);
  .py(50px);
  p {
    font-size: @font-size-sm;
  }
  :last-child {
    .mt(20px);
  }
}

// 响应式适配
@media (max-width: @tablet-breakpoint) {
  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footer-contact {
    margin-bottom: @space-lg;
  }
  .footer-qr {
    justify-content: center;
  }
}
</style>
